<template>
    <div class="wrapper">

			<!-- header部分 -->
			<header>
				<p>用户注册</p>
			</header>

			<!-- 表单部分 -->
			<ul class="form-box">
				<li>
					<div class="title">
						手机号码：
					</div>
					<div class="content">
						<input type="text" placeholder="手机号码" v-model="userId">
					</div>
				</li>
				<li>
					<div class="title">
						密码：
					</div>
					<div class="content">
						<input type="password" placeholder="密码" v-model="password1">
					</div>
				</li>
				<li>
					<div class="title">
						确认密码：
					</div>
					<div class="content">
						<input type="password" placeholder="确认密码" v-model="password2">
					</div>
				</li>
				<li>
					<div class="title">
						用户姓名：
					</div>
					<div class="content">
						<input type="text" placeholder="用户姓名" v-model="userName">
					</div>
				</li>
				<li>
					<div class="title">
						性别：
					</div>
					<div class="content" style="font-size: 3vw;">
						<input type="radio" name="sex" checked="" style="width:6vw;height: 3.2vw;" v-model="sex" value='1'>男
						<input type="radio" name="sex" style="width:6vw;height: 3.2vw;" v-model="sex" value='0'>女
					</div>
				</li>
			</ul>

			<div class="button-login">
				<button @click="toLogin">注册</button>
			</div>

			<!-- 底部菜单部分 -->
			<Footer></Footer>
		</div>
</template>

<script>
import Footer from '../components/Footer.vue';
 export default{
 	data(){
		return {
			userId: '',
			password1: '',
			password2: '',
			userName: '',
			sex: '',
			flag:0
		}
 	},
	 components:{
			Footer
		},
	 methods:{
			toLogin(){
				if(this.password1!=this.password2) {
					alert("两次密码输入不一致！请重新输入！")
				}
				else {
					this.$axios.post('UserController/getUserById', this.$qs.stringify({
						userId: this.userId
					})).then(response => {
						if(response.data!=''){
							alert("用户Id已存在！请登录！")
							this.$router.push('/login')
						}
						else {
							this.$axios.post('UserController/saveUser', this.$qs.stringify({
								userId: this.userId,
								password: this.password1,
								userName: this.userName,
								userSex: this.sex
							})).then(response => {
								if(response.data!=''){
									alert("用户注册成功！请登录！")
									this.$router.push('/login')
								}
							})
						}
					})
				}
			}
	 }
 }
</script>


<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box{
	width: 100%;
	margin-top: 12vw;
}
.wrapper .form-box li{
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}
.wrapper .form-box li .title{
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}
.wrapper .form-box li .content{
	flex: 1;
}
.wrapper .form-box li .content input{
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}
.wrapper .button-login{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}
.wrapper .button-login button{
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;

	border: none;
	outline: none;
}
.wrapper .button-register{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}
.wrapper .button-register button{
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #EEE;
	border-radius: 4px;

	border: none;
	outline: none;
	border: solid 1px #DDD;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #999;
	user-select: none;
	cursor: pointer;
}
.wrapper .footer li p{
	font-size: 2.8vw;
}
.wrapper .footer li i{
	font-size: 5vw;
}
</style>